﻿@page "/tables/header"

<h3>固定表头功能</h3>

<h4>滚动数据时表头固定方便查看各列表头信息</h4>

<p>
    本组件固定表头做法采用的是 <code>双表头</code> 做法，常见问题时出现列不对齐的问题，根据自己实际情况请自行添加部分样式
    <br />
    固定表头用法请尽可能的设置每列宽度，以避免列宽不对齐的问题
</p>

<Block Title="宽度自适应" Introduction="设置 <code>Height=200</code> 固定表头">
    <p>数据比较多加载后即出现纵向滚动条示例</p>
    <p>请设置个列宽度，允许一列宽度不设置，进行自动填充</p>
    <Table TItem="Foo" Items="@Items.Take(10)" Height="200" IsBordered="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>

<Block Title="宽度固定" Introduction="设置 <code>Height=200</code> 固定表头，当每页显示数据为 <code>10</code> 行时高度超出设置值 <code>200</code> 后，Table 组件出现纵向滚动条">
    <p>
        所有列均设置宽度，当屏幕过小时会自动出现横向滚动条
    </p>
    <Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsMultipleSelect="true" Height="200">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
        </TableColumns>
    </Table>
</Block>

<Block Title="宽度可调整" Introduction="固定表头的同时设置 <code>AllowResizing</code> 属性，使列宽可以调整">
    <p>
        通过设置 <code>Height</code> 参数固定表头
        <br />
        通过设置 <code>AllowResizing</code> 参数允许调整列宽
    </p>
    <Table TItem="Foo" Items="@Items.Take(10)"
           IsBordered="true" IsMultipleSelect="true" IsPagination="true"
           Height="200" AllowResizing="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
        </TableColumns>
    </Table>
</Block>
